<template>
  <div class="classroom-usage-report">
    <!-- 筛选条件 -->
    <condition-card @reset="reset" @search="initData">
      <el-row>
        <el-col :span="8">
          <el-form-item label="学期">
            <CalendarSelect v-model="query.calendarId" :defaulted="true" @change="changeCalendar" @load-done="calendarLoadDone" ></CalendarSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="校区">
            <DictSelect :plzSelect="true" v-model="query.campus" :data="options.campus" :clearable="true" @change="handelCampusChang" ></DictSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="教学楼">
            <DictSelect :plzSelect="true" v-model="query.towerCode" :data="options.teachingBuildingArr" :filterable="true" :clearable="true" ></DictSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="周次">
            <DictSelect :plzSelect="true" v-model="query.weekAt" :data="options.weekAtList" :multiple="false" :clearable="false" ></DictSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="星期">
            <DictSelect :plzSelect="true" v-model="query.weekDayList" :data="options.weekDay" :multiple="true" :clearable="false" ></DictSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="节次">
            <el-row type="flex" justify="center" align="middle">
              <el-col>
                <el-input type="text" v-model="query.timeStart" @keypress.native="checkNum" @blur="checkTimeValue($event,1)" :placeholder="$t('message.mustNumber')" />
              </el-col>
              <div class="text-center plr-15px">-</div>
              <el-col>
                <el-input type="text" v-model="query.timeEnd" @keypress.native="checkNum" @blur="checkTimeValue($event,2)" :placeholder="$t('message.mustNumber')" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>
    <!-- 教室使用情况统计 -->
    <el-card shadow="never">
      <!-- <h2>教室使用情况统计</h2> -->
      <div class="edu-opertion-bar">
        <div class="float-left">
          <el-input :placeholder="'教室名称/教学楼/校区'" v-model="query.conditionValue" style="width:240px" :clearable="true" @change="handSearchChang" >
            <i class="el-icon-search" slot="suffix" style="margin-top:10px;cursor:pointer"></i>
          </el-input>
        </div>
        <div class="float-right">
          <el-button @click="exportExcelClaUsageReportCount" type="success" icon="el-icon-printer" plain>导出</el-button>
        </div>
        <div class="clear-both"></div>
      </div>
      <EduTable :order="false" :selection="false" :pageNum="query.pageNum_" :data="usageReportList.data"
        :total="usageReportList.total" :cellBackgroundColor="cellBackgroundColor" @page-change="pageChange" class="classroomTable" >
        <el-table-column label="学期" min-width="130" >
          <template slot-scope="scope">
            <span>{{scope.row.calendarName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="教室名称" min-width="110" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.classroomName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="教学楼" min-width="90" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.towerName}}</template>
        </el-table-column>
        <el-table-column label="校区" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.campusI18n}}</template>
        </el-table-column>
        <el-table-column label="周次" min-width="50">
          <template slot-scope="scope">{{scope.row.weekAt}}</template>
        </el-table-column>
        <el-table-column label="星期" min-width="90">
          <template slot-scope="scope">{{scope.row.weekDayStr}}</template>
        </el-table-column>
        <el-table-column label="上课节次" align="center">
          <el-table-column label="1" min-width="38"></el-table-column>
          <el-table-column label="2" min-width="35"></el-table-column>
          <el-table-column label="3" min-width="35"></el-table-column>
          <el-table-column label="4" min-width="35"></el-table-column>
          <el-table-column label="5" min-width="35"></el-table-column>
          <el-table-column label="6" min-width="35"></el-table-column>
          <el-table-column label="7" min-width="35"></el-table-column>
          <el-table-column label="8" min-width="35"></el-table-column>
          <el-table-column label="9" min-width="35"></el-table-column>
          <el-table-column label="10" min-width="38"></el-table-column>
          <el-table-column label="11" min-width="38"></el-table-column>
          <el-table-column label="12" min-width="38"></el-table-column>
        </el-table-column>
      </EduTable>
    </el-card>
  </div>
</template>

<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import * as API from "common/src/api/resource/classroom";
export default {
  name: "classroomUsageReport",
  data() {
    return {
      query: {
        pageNum_: 1,
        pageSize_: 20,
        calendarId: "",
        campus: "",
        towerCode: "",
        weekAt: "1",
        weekDayList: [],
        timeStart: "",
        timeEnd: "",
        conditionValue: ""
      },
      defaultQuery: {
        pageNum_: 1,
        pageSize_: 20,
        calendarId: "",
        campus: "",
        towerCode: "",
        weekAt: "1",
        weekDayList: [],
        timeStart: "",
        timeEnd: "",
        conditionValue: ""
      },
      options: {
        campus: [],
        teachingBuildingArr: [],
        weekAtList: [ { label: "第1周", value: "1" }, { label: "第2周", value: "2" } ],
        weekDay: [ { label: "星期一",  value: "1" }, { label: "星期二", value: "2" }, { label: "星期三", value: "3" },
          { label: "星期四", value: "4" }, { label: "星期五", value: "5" }, { label: "星期六", value: "6" }, { label: "星期日", value: "7" } ]
      },
      usageReportList: {
        data: [],
        total: ""
      },
      allCalendarList: [],
      totalWeekNumber: "",
      currentTermCalendar: "",
      //可输入最大节次
      maxTime: 12,
      //可输入最小节次
      minTime: 1,
      cellBackgroundColor: "background:#FF7300"
    };
  },
  methods: {
    //每当校历发生变化，动态加载教学周总量
    changeCalendar(val) {
      if (this.allCalendarList) {
        this.allCalendarList.forEach(canlendar => {
          if (canlendar.id === val) {
            this.totalWeekNumber = canlendar.weekNum;
            this.initWeekAtList(this.totalWeekNumber);
          }
        });
      }
    },
    initWeekAtList(totalNum) {
      let tempWeekAtList = [];
      //更新教学周下拉框
      for (let i = 0; i < totalNum; i++) {
        tempWeekAtList.push({  value: parseInt(i + 1),  label: "第" + parseInt(i + 1) + "周" });
      }
      this.options.weekAtList = tempWeekAtList;
    },
    calendarLoadDone(list) {
      if (list) {
        this.allCalendarList = list;
        for (let index = 0; index < list.length; index++) {
          const element = list[index];
          if (element.currentTermFlag) {
            this.currentTermCalendar = element.id;
            this.query.calendarId = element.id;
            this.totalWeekNumber = element.weekNum;
            this.initWeekAtList(this.totalWeekNumber);
            this.queryList();
            break;
          }
        }
      }
    },
    checkNum(e) {
      //只输入数字正则
      let reg = /^(0|[1-9]\d*)$/;
      let num = e.target.value || "";
      let str =
        e.key && e.key != "Unidentified" ? e.key : num.substr(num.length - 1);
      //没有满足任何一种情况，中断执行
      if (reg.test(str)) {
        return true;
      }
      e.returnValue = false;
      return false;
    },
    checkTimeValue(e, flag) {
      let inputValue = e.target.value;
      if (inputValue > this.maxTime) {
        e.target.value = this.maxTime;
        if (flag === 1) {
          this.query.timeStart = this.maxTime;
        } else {
          this.query.timeEnd = this.maxTime;
        }
      }
    },
    checkWeekValue(e, flag) {
      let inputValue = e.target.value;
      if (inputValue > this.totalWeekNumber) {
        e.target.value = this.totalWeekNumber;
        this.query.weekAt = this.totalWeekNumber;
      }
    },
    async queryList() {
      let res = await API.classroomUsageReportCountQuery(this.query);
      if (res && res.code == 200) {
        //要对上课节次填充颜色，需要转换一些数据
        let tempDataList = res.data.list;
        tempDataList.map(val => {
          return this.converData(val);
        });
        this.usageReportList.data = res.data.list;
        this.usageReportList.total = res.data.total_;
      }
    },
    converData(val) {
      let cellFillingList = [];
      let timeBit = val.timeBit;
      let timeList = timeBit.toString(2).split("").reverse();
      for (let [index, value] of timeList.entries()) {
        if (value === "1") {
          cellFillingList.push(parseInt(index) + 6);
        }
      }
      val.cellFillingList = cellFillingList;
      return val;
    },
    // 分页功能
    pageChange(val) {
      this.query.pageNum_ = val.pageNum;
      this.query.pageSize_ = val.pageSize;
      this.queryList();
    },
    // 获取下拉框数据（数据字典）
    initOptions() {
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_XQ"]
      };
      queryDic(data).then(res => {
        if (res.code == 200) {
          UTILS.fillSelect(
            {
              campus: "X_XQ"
            },
            res.data,
            this.options
          );
        }
      });
    },
    // 获取教学楼数据方法 (根据校区获取)
    handelCampusChang(item) {
      this.query.towerCode = "";
      this.options.teachingBuildingArr = [];
      API.conditionQueryByDict({ campus: item }).then(res => {
        if (res && res.code == 200) {
          let dataList = res.data.list;
          dataList.forEach(item => {
            this.options.teachingBuildingArr.push({
              value: item.code,
              label: item.name
            });
          });
        }
      });
    },
        handSearchChang(string) {
            this.initData();
        },
    reset() {
      this.query = JSON.parse(JSON.stringify(this.defaultQuery));
      this.options.teachingBuildingArr = [];
      this.handelCampusChang(null);
      this.initWeekAtList(this.totalWeekNumber);
      //学期为当前学期
      this.query.calendarId = this.currentTermCalendar;
      this.queryList();
    },
    initData() {
      this.query.pageNum_ = 1;
      this.queryList();
    },
    exportExcelClaUsageReportCount() {
      let res = API.exportExcelClaUsageReportCount(this.query);
    }
  },
  created() {
    this.initOptions();
    this.handelCampusChang(null);
  }
};
</script>

<style lang="scss" scoped>
.classroom-usage-report {
  .plr-15px {
    padding: 0 6px;
    margin-left: 15px;
  }
}
.el-table .orange-cell {
  background: #ff7300;
}
.classroomTable{
    .cell{
      white-space: pre-line;
	  padding: 0 2px;
	  text-align: center;
    }
  }
</style>

